<template>
    <div class="box" :style="loginBg">
        <!-- <div class="box" :style="{'background':' url('+loginBg+')'}"  v-if="login_show_img=''"> -->
        <!-- <div class="box" :style="{'background':' url('+{{ login_show_img }}+')'}" v-else> -->
        <div class="main">
            <div class="box_right">
                <div class="right_mian">
                    <div class="right_header">
                        <img :src="logo" alt="" v-if="logo = ''">
                        <img src="../assets/00.png" alt="" v-else>
                        <h3>{{ name }}登录</h3>
                        <!-- <h3>车机会</h3> -->
                    </div>
                    <div class="right_form">
                        <div class="phone">
                            <div style="width: 50px; margin: auto;">
                                <i class="el-icon-user-solid" style="color: #F9D77B;"></i>
                            </div>
                            <input placeholder="请输入账号" v-model="loginForm.username">
                        </div>
                        <!-- 密码 -->
                        <div class="yan">
                            <!-- <img src="../../static/image/mima@2x.png" alt=""> -->
                            <div style=" font-weight: bolder; width: 50px;">
                                <img src="../assets/pwd.png" alt="" style="width: 16px; height: 16px;">
                            </div>
                            <i class="icon-password"></i>
                            <input type="text" v-if="pwdType" v-model="loginForm.password" />
                            <input type="password" placeholder="请输入密码" v-model="loginForm.password" v-else />
                            <img :src="seen ? seenImg : unseenImg" @click="changeType()" v-on:mouseover="hoverEye"
                                v-on:mouseout="outEye" class="icon-eye" />

                        </div>
                        <!-- 验证码 -->
                        <div class="yan">
                            <!-- <img src="../../static/image/mima@2x.png" alt=""> -->
                            <div style="font-size: 0.7rem; font-weight: bolder; width: 64px;">
                                <img src="../assets/code.png" alt="" style="width: 16px; height: 16px;">
                            </div>
                            <input placeholder="请输入图片验证码" name="input" v-model="loginForm.code">
                            <button class='ycode picture' :disabled="dis">
                                <div style="width: 100%; font-weight: bolder; height: 100%" @click="changeImg">
                                    <img class="verifyImg" :src="verifyImg" alt="">
                                </div>
                            </button>
                        </div>
                        <!-- 按钮 -->
                        <div style="margin-top: 35px;">
                            <el-button class="btn" @click="submitForm()">登录</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// 引入封装好的api.js
import { apiServe } from '@/api/api';
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                uniqid: '',
                code: ''
            },

            // loginBg: require('../assets/bj.png'),
            loginBg: {
                backgroundImage: 'url(' + require('../assets/bj.png') + ')'
            },
            dis: false,
            verifyImg: '',
            name: '',
            logo: '',
            login_show_img: '',
            msg: '获取验证码',
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    {
                        pattern: /[a-z]{5,10}/g,
                        message: '5-10位字母',
                        trigger: 'blur'
                    }
                ],
                passWord: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            },
            seen: "",
            unseenImg: require("@/assets/closeeye.png"),   //看不见密码时小眼睛的显示图片地址
            seenImg: require("@/assets/openeye.png"),   //看得见密码时小眼睛的显示图片地址
            // eyeTxt: "",
            pwdType: false   //此时文本框隐藏，显示密码框 


        };
    },
    methods: {
        //定义一个定时器 用来存放倒计时
        Timer() { },

        // 登录基础信息
        // loginShopInit(){
        //    let params={
        //     name:this.loginForm.name
        //    }
        // },


        // getCode() {

        //     setTimeout(() => {
        //         this.setTimer();
        //     }, 1000)

        // },
        // setTimer() {
        //     let holdTime = 60;
        //     this.Timer = setInterval(() => {
        //         if (holdTime <= 0) {
        //             this.dis = false;
        //             this.msg = "验证码"
        //             clearInterval(this.Timer);
        //             return;
        //         }
        //         holdTime--;
        //         this.msg = holdTime
        //     }, 1000)
        // },
        //     submitForm() {
        //     // this.$refs[formName].validate(async (valid) => {
        //     // if (!valid) return false;
        //     // const { data: res } = await this.axios.post("login", this.loginForm)
        //     // console.log(res)
        //     // if (res.code == 101) return this.$message.error('用户名和密码错误');
        //     // if (res.code != 200) return this.$message.error('登录错误,联系管理员');
        //     // this.$message.success('登陆成功');
        //     // // 登录成功后 保存token 后面所有的接口都需要token验证
        //     // sessionStorage.token = res.data.token;
        //     // 编程式导航 登录成功 跳转到首页
        //     // this.$router.push({ path: "/home/indexPage" });
        //     // if (valid) {
        //     //     // this.$axios.post("http://.com/login",this.loginForm).then(res => {
        //     //     //     console.log(res);
        //     //     // })
        //     //     // this.axios.post("login", this.loginForm).then(res => {
        //     //     //     console.log(res);
        //     //     //     if (res.data.code == 200) {
        //     //     //         this.$message({
        //     //     //             message: "登陆成功",
        //     //     //             type: 'success'
        //     //     //         })
        //     //     //         // 登录成功后 保存token 后面所有的接口都需要token验证
        //     //     //         sessionStorage.token = res.data.data.token;
        //     //     //         // 编程式导航 登录成功 跳转到首页
        //    this.$router.push({ path: "/home" });
        //     //     //     } else {
        //     //     //         if (res.data.code == 101) {
        //     //     //             this.$message({
        //     //     //                 message: "用户名密码错误",
        //     //     //                 type: 'error'
        //     //     //             })
        //     //     //         }
        //     //     //     }
        //     //     // })

        //     // } else {
        //     //     console.log('error submit!!');
        //     //     return false;
        //     // }
        //     // });
        //     },


        async submitForm() {
            console.log(this.loginForm, 'loginForm');
            //校验成功 调取登录接口
            let res = await apiServe.loginSubmit(this.loginForm);
            console.log(res, 'res数据');
        },
        // this.$router.push('/shouye')
        // if(res){
        //    // 存token  存userName 存role
        //   localStorage.setItem('ApShop-Session-Id',res.data.ApShop-Session-Id)s
        //   localStorage.setItem('username',res.data.username)
        //   localStorage.setItem('password',res.data.password)
        //   localStorage.setItem('uniqid',res.data.uniqid)
        //   localStorage.setItem('code',res.data.code)

        //   this.$message({
        //     message:'登录成功',
        //     type:"success"
        //   })
        //     // 跳转  首页
        //     this.$router.push('/home')
        // } else {
        //             if (res.data.code == 404) {
        //                 this.$message({
        //                     message: "用户名密码错误",
        //                     type: 'error'
        //                 })
        //             }
        //         };
        // 
        // 点击密码显示隐藏的
        changeType: function () {
            this.seen = !this.seen;   //小眼睛的变化
            this.pwdType = !this.pwdType;   //跟着小眼睛变化，密码框隐藏，显示文本框 内容就显示了
        },
        hoverEye: function (event) {
            this.seen = !this.seen;
        },
        outEye: function (event) {
            this.seen = !this.seen;
        },
        //改变验证码的图片
        changeImg() {
            this.getLoginVerify()
        },
        // 登录获取验证码
        async getLoginVerify() {
            let res = await apiServe.loginVerify()

            console.log('图片验证码', res);
            //每点击一次验证码,掉一次获取验证码的接口,然后把接口里面的id赋值给loginForm.uniqid
            this.loginForm.uniqid = res.data.uniqid
            this.verifyImg = res.data.img;

        },
        // 登录页基础信息
        async getloginShopInit() {
            let res = await apiServe.loginShopInit()
            this.name = res.data.name
            this.logo = res.data.logo
            this.login_show_img = res.data.login_show_img
            console.log('登录基础信息', res);
        }
    },
    created() {
        this.getLoginVerify(),
        this.getloginShopInit()
    },
    mounted() {

    }
}
</script>
<style lang="scss" scoped>
.verifyImg {
    width: 100%;
    height: 100%;
}

.box {
    width: 100%;
    position: relative;
    height: 100vh;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置背景图片的URL */
    background-size: cover;
    /* 背景图片大小为覆盖整个元素 */
    background-position: center;
    /* 背景图片居中显示 */
    background-repeat: no-repeat;

    /* 背景图片不重复 */
    .main {
        width: 360px;
        height: 395px;
        display: flex;

        .box_left {
            width: 65%;
            height: 100%;
            background-color: white;
            background-image: url('../assets/login.png');
            /* 设置背景图片的URL */
            background-size: contain;
            /* 背景图片大小为覆盖整个元素 */
            background-position: center;
            /* 背景图片居中显示 */
            background-repeat: no-repeat;

        }

        .box_right {
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;

            .right_mian {
                width: 100%;
                height: 90%;
                // background-color: aqua;

            }

            .right_header {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    margin-right: 5px;
                    height: 25px;
                    width: 44px;
                }
            }

            .right_form {
                margin: 10% auto;
                // padding: 20px;
                width: 75%;

                input {
                    height: 35px;
                    border: none;
                    outline: none;
                    // padding: 5px 10px;
                }

                .phone {
                    display: flex;
                    background-color: #F8F8F8;
                    border: 1px solid #F2F2F2;
                }

                .phone>img {
                    width: 20px;
                    height: 20px;
                    /* margin-left: 10px; */
                    margin-right: 10px;
                }

                .phone>input {
                    width: 80%;
                    font-size: 0.7rem;
                    background-color: #F8F8F8;
                }

                .yan {
                    display: flex;
                    // padding: 0 10px;
                    align-items: center;
                    background-color: #F8F8F8;
                    margin-top: 25px;
                    border: 1px solid #F2F2F2;
                    height: 35px;

                    input {
                        width: 60%;
                        font-size: 0.7rem;
                        background-color: #F8F8F8;
                        height: 100%;
                    }
                }

                .yan>img {
                    width: 20px;
                    height: 20px;
                    /* margin-left: 10px; */
                    margin-right: 10px;
                }


                .ycode {
                    background-color: #F8F8F8;
                    border: none;
                    width: 25%;
                    height: 45px;
                    display: inline-block;
                    padding: 3px;
                    font-size: 0.6rem;
                    // color: #257FA2;
                    font-weight: 500;
                }

                .picture {
                    background-color: #D1D1D1;
                    height: 100%;
                    width: 50%;
                    padding: 0;
                }
            }

        }
    }

    // 按钮
    .btn {
        background-color: #FEB801;
        color: #000;
        width: 100%;
        font-size: 0.7rem;
        border-radius: 0;
    }
}
</style>